/* Copyright 2023 The LUCI Authors.
**
** Licensed under the Apache License, Version 2.0 (the "License");
** you may not use this file except in compliance with the License.
** You may obtain a copy of the License at
**
**      http://www.apache.org/licenses/LICENSE-2.0
**
** Unless required by applicable law or agreed to in writing, software
** distributed under the License is distributed on an "AS IS" BASIS,
** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
** See the License for the specific language governing permissions and
** limitations under the License.
 */

body {
  margin: 0;
  padding: 0px;
  color: var(--default-text-color);
  font-family: "Google Sans", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.25px;
}

html {
  --default-text-color: #212121;
  --light-text-color: #636363;
  --greyed-out-text-color: #808080;
  --active-text-color: #1976d2;

  --exonerated-color: #0084ff;
  --success-color: #169c16;
  --failure-color: #d23a2d;
  --warning-text-color: #ff9900;
  --warning-color: #ffae00;
  --warning-bg-color: #ffe09e;
  --scheduled-color: #73808c;
  --started-color: #ff8000;
  --critical-failure-color: #6c40bf;
  --skipped-color: #606060;
  --precluded-color:  #000000;
  --canceled-color: var(--exonerated-color);

  --scheduled-bg-color: #b7c1c9;
  --started-bg-color: #ffd1a2;
  --success-bg-color: #97ddbb;
  --failure-bg-color: #ffc9c5;
  --critical-failure-bg-color: #dfceff;
  --canceled-bg-color: #c5ecff;

  --block-background-color: #f5f5f5;
  --dark-background-color: #555555;
  --highlight-background-color: var(--warning-color);

  --divider-color: #dddddd;
  --active-color: #007bff;
  --light-active-color: #d9edfc;
  --delete-color: var(--failure-color);
  --mdc-theme-primary: var(--active-color);

  --light-background-color-1: hsl(206, 85%, 96%);
  --light-background-color-2: hsl(206, 85%, 91%);
  --light-background-color-3: hsl(206, 85%, 84%);
  --light-background-color-4: hsl(206, 85%, 74%);

  --expand-button-width: 155px;

  /* These colors are for LUCI Bisection */
  --suspect-found-color: #5468ce;

  /* GM3 colors */
  /**
   * Surface: The background color for raised or contained components
   * like Paper, Card, AppBar, Dialog, Menu, Accordion headers/content, etc.
   * Used as the canvas for content within these components.
   */
   --gm3-color-surface: #FFFFFF;

   /**
    * Outline Variant: A subtle border or divider color.
    * Used for decorative separation, component boundaries without strong emphasis.
    * E.g., Card/Paper borders, Accordion borders, Table dividers, TextField outlines.
    */
   --gm3-color-outline-variant: #DADCE0;

   /**
    * On Surface Variant: Color for medium-emphasis elements appearing ON the 'surface'.
    * Used for secondary text, standard/less-important icons.
    * Should contrast sufficiently with --gm3-color-surface.
    * E.g., Body text, input labels, default icon color (menu, settings), text buttons.
    */
   --gm3-color-on-surface-variant: #5F6368;

   /**
    * On Surface: Color for high-emphasis elements appearing ON the 'surface'.
    * Used for primary text content, important icons needing more weight.
    * Should offer slightly higher contrast with --gm3-color-surface than the 'variant'.
    * E.g., Component titles, emphasized icons.
    */
   --gm3-color-on-surface: #444746;


  /* --- New Colors from Figma --- */
  --gm3-color-primary: #1A73E8; /* Blue for links, selected tabs, buttons (G Blue 600) */
  --gm3-color-on-surface-strong: #202124; /* Strongest text, titles (G Grey 900) */
  --gm3-color-on-surface-medium: #3C4043; /* Body text, captions (G Grey 800) */
  --gm3-color-on-surface-light: #80868B; /* Secondary/Hint text (G Grey 600) */

  --gm3-color-error: #D93025; /* Error text/icons (G Red 600) */
  --gm3-color-error-container: #FCE8E6; /* Error background/chip (G Red 50) */

  --gm3-color-success: #1E8E3E; /* Success text/icons (G Green 600) */
  --gm3-color-success-container: #E6F4EA; /* Success background/chip (G Green 50) */

  --gm3-color-warning: #F29900; /* Warning text (G Yellow 700) */
  --gm3-color-warning-dark: #E37400; /* Warning icons (G Yellow 900) */
  --gm3-color-warning-container: #FEF7E0; /* Warning background/chip (G Yellow 50) */

  --gm3-color-primary-container: #E8F0FE; /* Light blue background/chip (G Blue 50) */
  --gm3-color-surface-container: #F1F3F4; /* Light grey background/chip (G Grey 100) */
  --gm3-color-surface-container-low: #F8F9FA; /* Lighter grey background/section (G Grey 50) */

  /* --- CORRECTED: GM3 On-Container, Info, and Outline Colors using Brand Palette --- */
  /* High-contrast colors for text on top of colored containers */
  --gm3-color-on-primary-container: #174ea6;  /* G Blue 900 */
  --gm3-color-on-error-container: #a50e0e;      /* G Red 900 */
  --gm3-color-on-success-container: #0d652d;    /* G Green 900 */
  --gm3-color-on-warning-container: #e37400;    /* G Yellow 900 */
  --gm3-color-on-info-container: #174ea6;       /* G Blue 900 */

  /* A neutral, informational color set based on the Primary/Blue palette */
  --gm3-color-info: var(--gm3-color-primary);             /* G Blue 600 */
  --gm3-color-info-container: var(--gm3-color-primary-container); /* G Blue 50 */

  /* Outline colors for bordered components, aliased to main colors */
  --gm3-color-primary-outline: var(--gm3-color-primary);
  --gm3-color-error-outline: var(--gm3-color-error);
  --gm3-color-success-outline: var(--gm3-color-success);
  --gm3-color-warning-outline: var(--gm3-color-warning);
  --gm3-color-info-outline: var(--gm3-color-info);

  /* --- Font Families (Ensure they are loaded) --- */
  --gm3-font-family-robot: 'Roboto', sans-serif;
  --gm3-font-family-robot-mono: 'Roboto Mono', monospace;
  --gm3-font-family-google-symbols: 'Google Symbols'; /* If using icon font */
}
